<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java 文档搜索</title>
    
    <script src = "js/jquery.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
   <style>
    /*这部分写样式*/
    /*先去掉浏览器的默认样式*/
    *{
        margin:0;
        padding: 0;
        box-sizing: border-box;
    }
    /*给整体页面指定一个高度(和浏览器一样高*/
    html,body{
        height: 100%;/*意思是body和html标签的高度一样,整个浏览器窗口的高度*/
        background-image:url(image/1671357230120.jpg);
        /*设置背景图不平铺*/
        background-repeat: no-repeat;
        /*设置背景图的位置*/
        background-position: center center;
        /*设置背景图的大小*/
        background-size: cover;
    }
    /*针对.container 也设置样式,实现版心效果*/
    .container{
        /*此处宽度也可以设成百分数,当前就使用固定宽度*/
        width:1200px;
        height:100%;
        /*设置水平居中*/
        margin:0 auto;
        /*设置背景色*/
        background-color: rgba(255, 255, 255, 0.833);
        /*设置圆角矩形*/
        border-radius:10px;
        /*设置内边距,避免文字内容紧贴着边界*/
        padding:25px;
        /*加上这个属性,超出元素的部分就会生成一个滚动条*/
        overflow: auto;
    }
    .header{
        width:100%;
        height:50px;
         /*弹性布局*/
         display:flex;
         /*水平*/
         justify-content:space-between;
         align-items: center;
    }
    .header> input{
        width:1045px;
        height:50px;
        font-size: 22px;/*字体*/
        line-height: 50px;
        padding-left: 10px;
        border-radius:10px;
    }
    .header>button{
        width:100px;
        height:50px;
        background-color: rgba(18, 174, 191, 0.744);
        color:#fff;
        font-size:22px;
        line-height:50px;
        border-radius:10px;
        border:none;

    }
    .header>button:active{/*结果*/
        color:rgb(128, 128, 128);
    }
    .result.count{
        color:gray;
        margin-top: 10px;
    }
    .header>button:active{
        background:gray;
    }
    .item{
        width:100%;
        margin-top:20px;
    }
    .item a{
        display:block;
        height:40px;
        /*字体*/
        font-size: 22px;
        line-height: 40px;
        font-weight:700;/*加粗*/
        color:rgb(2, 171, 190);;
    }
    .item .desc{
        font-size:18px;
    }
    .item .url{
        font-size:18px;
        color:rgb(7, 156, 2)
    }
    .item .desc i {
       color:rgb(223, 2, 2);
       /*去掉斜体*/
       font-style: normal;
    }
</style>
  
   
</head>
<body>  
    <!-- 通过container表示整个页面元素的容器 -->
<div class="container">

    <!--1.搜索框+搜索按钮-->
    <div class = "header">  
        <input type="text">
        <button id="search-btn">搜索</button>
    </div>

    <!--2.显示搜索结果-->
 <div class="result">
    <!-- 包含了很多条搜索记录 -->
    <!-- 每个.item就表示一条记录 -->
    <!-- 接下来要通过访问服务器的方式获取到搜索结果,并且由JS动态生成页面 -->
    <!-- <div class="item">
        <a href="#">我是标题</a>
        <div class="desc">我是一段描述 </div>
        <div class="url">http://www.baidu.com</div>
 </div>
 <div class="item">
    <a href="#">我是标题</a>
    <div class="desc">我是一段描述 </div>
    <div class="url">http://www.baidu.com</div>
</div>
<div class="item">
    <a href="#">我是标题</a>
    <div class="desc">我是一段描述 </div>
    <div class="url">http://www.baidu.com</div>
</div>
<div class="item">
    <a href="#">我是标题</a>
    <div class="desc">我是一段描述 </div>
    <div class="url">http://www.baidu.com</div>
  -->
</div>
</div>
</div>
<script>
    /*放用户自己写的js代码*/
    let button = document.querySelector("#search-btn");
    button.onclick = function(){
        /*先获取到输入框的内容*/
        let input = document.querySelector(".header  input");
        //console.log("0000");
        let query = input.value;
        console.log("query:" +query);
        /*然后构造一个ajax请求发给服务器*/
        $.ajax({
            type:"GET",
            url:"searcher?query="+query,
            success:function(data,status){
                /*success这个函数会在请求成功后调用
                data参数表示拿到的结果数据
                status参数表示http状态码
                success是回调函数:框架在合适的时机自动的调用这个函数
                根据收到的数据结合,构造出页面内容*/
               /* console.log(data);*/
               buildResult(data);
            }
        })
    }
    function buildResult (data){
        //通过这个函数,来吧响应数据构造成页面内容
        //遍历data里每个元素
        //针对每个元素都创建一个div.item,然后把标题,URL,描述都构造好
        //再把这个div.item给加入到div.result
        //这些操作都是基于DOM API来展开
        //获取到.result
let result = document.querySelector('.result');
//清空上次结果,不要让每次搜索结果都混在一起
result.innerHTML = '';
    //先构造一个div来显示结果个数   
let countDiv = document.createElement('div');
countDiv.innerHTML ='当前找到'+data.length+'个结果!';
countDiv.className = 'count';//样式
result.appendChild(countDiv);

 //这就相当于Java中的for each
        //此处得到的item就会分别代表data中的每个元素
for(let item of data){
    let itemDiv = document.createElement('div');
    itemDiv.className = 'item';

/*用createelement这个API创建具体的doc对象,给他制定标签名叫div*/

/*构造标题*/
let title = document.createElement('a');
title.href = item.url;//href写错了
title.innerHTML = item.title;
title.target = '_blank';//意思是新开一个空白页面,填充目标页面
itemDiv.appendChild(title);

/*构造一个描述*/
let desc = document.createElement('div');
desc.className = 'desc';
/*css类名通过className属性进行设置*/
desc.innerHTML = item.desc;
/*上面是设置内容,都是从服务器得到的*/
itemDiv.appendChild(desc);
 
/*构造一个URL*/
let url = document.createElement('div');
url.className = 'url';
url.innerHTML = item.url;
itemDiv.appendChild(url);
//把itemDiv加到.result中
result.appendChild(itemDiv);
        }
    }
</script>
</body>
</html>